<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<head>
    <!--添加jquery-ui支持-->
    <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}"/>
</head>
<body>
<div layout:fragment="content">
    <h1 th:text="#{handover}">交接记录</h1>

    <div>
        <form id="handoverForm" class="form-horizontal" th:action="@{/handover/edit}" th:object="${handover}" method="post">
            <input type="hidden" th:field="*{id}"/>
            <div class="form-group">
                <label for="date" class="col-sm-1 control-label" th:text="#{handover.date}">日期</label>
                <div class="col-sm-3">
                    <input type="text" th:field="*{date}" class="form-control" required th:placeholder="#{handover.date}" />
                    <p th:if="${#fields.hasErrors('date')}" th:errors="*{date}" class="error">日期有错误</p>
                </div>

                <label for="shiftId.id" class="col-sm-2 control-label" th:text="#{handover.shift}">班次</label>
                <div class="col-sm-2">
                    <select class="form-control" th:field="*{shiftId.id}" required>
                        <th:block  th:each="var : ${shiftList}">
                            <option th:value="${var.id}"  th:text="${var.name}" th:selected="${var.id==handover.shiftId.id}"></option>
                        </th:block>
                    </select>
                </div>

                <label for="userId.id" class="col-sm-2 control-label" th:text="#{user}">员工</label>
                <div class="col-sm-2">
                    <select class="form-control" th:field="*{userId.id}" required>
                        <th:block  th:each="var : ${userList}">
                            <option th:value="${var.id}"  th:text="${var.name}" th:selected="${var.id==handover.userId.id}"></option>
                        </th:block>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="temperature" class="col-sm-offset-4 col-sm-2 control-label" th:text="#{handover.temperature}">温度</label>
                <div class="col-sm-2">
                    <input type="number" th:field="*{temperature}" class="form-control" required min="-60" max="100" step="0.1" th:placeholder="#{handover.temperature}"/>
                    <p th:if="${#fields.hasErrors('temperature')}" th:errors="*{temperature}" class="error">temperature Error</p>
                </div>

                <label for="humidity" class="col-sm-2 control-label" th:text="#{handover.humidity}">湿度</label>
                <div class="col-sm-2">
                    <input type="number" th:field="*{humidity}" class="form-control" required min="0" max="100" th:placeholder="#{handover.humidity}"/>
                    <p th:if="${#fields.hasErrors('humidity')}" th:errors="*{humidity}" class="error">humidity Error</p>
                </div>
            </div>

            <div class="form-group" th:each="detailsList,stat : *{detailsList}">
                <label for="detailsList.detail" class="col-sm-1 control-label" th:text="${stat.count}">#</label>
                <div class="col-sm-11">
                    <input type="hidden" th:name="${'detailsList['+ stat.index +'].id'}" id="detailsList.id" th:value="${detailsList.id}"/>
                    <input type="text" th:name="${'detailsList['+ stat.index +'].detail'}" id="detailsList.detail" th:value="${detailsList.detail}" class="form-control" maxlength="76" th:placeholder="#{handover.detailsList.detail}"/>
                </div>
            </div>

            <th:block th:if="${handover.detailsList == null || #lists.size(handover.detailsList) < 10}">
            <div class="form-group" th:each="i:${#numbers.sequence(((handover.detailsList != null)?(#lists.size(handover.detailsList)):0)+1,10)}">
                <label for="detailsList.detail" class="col-sm-1 control-label" th:text="${i}">#</label>
                <div class="col-sm-11">
                    <input type="hidden" th:name="${'detailsList['+ (i-1) +'].id'}" id="detailsList.id" value="" />
                    <input type="text" th:name="${'detailsList['+ (i-1) +'].detail'}" value="" class="form-control" maxlength="76" th:placeholder="#{handover.detailsList.detail}"/>
                </div>
            </div>
            </th:block>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input type="submit" th:value="#{submit}" class="btn btn-info col-sm-offset-0"/>
                    &nbsp; &nbsp; &nbsp;
                    <a href="/handover/list" th:href="@{/handover/list}" class="btn btn-info col-sm-offset-1" th:text="#{back}">返回</a>
                </div>
            </div>

        </form>
    </div>
</div>

<th:block layout:fragment="pagescript">
    <!--添加jquery-ui支持-->
    <script th:src="@{/js/jquery-ui/jquery-ui.min.js}"></script>
    <script th:src="@{/js/jquery-ui/jquery-ui.datepicker-zh-CN.js}"></script>
    <script th:src="@{/js/jquery-viladate/jquery.validate.min.js}"></script>
    <script th:src="@{/js/jquery-viladate/messages_zh.min.js}"></script>
    <script th:inline="javascript">
        $(document).ready(function () {
            $('#date').datepicker({
                changeMonth: true,
                changeYear: true,
                showWeek: true,
                firstDay: 0,
                showOtherMonths: true,
                selectOtherMonths: true,
                showAnim: 'slideDown',
                showButtonPanel: true
            });
            $("#handoverForm").validate({
                onsubmit:true,

                rules: {
                    date:{
                        dateISO:true
                    }
                },
                messages:{

                },
                submitHandler: function(form) {
                    form.submit();
                },
                invalidHandler: function(form, validator) {return false;}
            });
        });
    </script>
</th:block>
</body>
</html>
